<template>
  <div class="container">
    <div class="select">
      <el-select
        v-model="selectedTitle"
        placeholder="所有考试标题"
        clearable
        @change="findExamScore"
      >
        <el-option
          v-for="(item, index) in titleList"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectedClass"
        placeholder="所有班级"
        clearable
        @change="findExamScore"
      >
        <el-option
          v-for="(item, index) in classList"
          :key="index"
          :value="item"
          :label="item"
        ></el-option>
      </el-select>
      <div class="input_soso">
        <el-input
          v-model="input"
          :placeholder="placeholder"
          prefix-icon="el-icon-search"
          size="mini"
          clearable
          @clear="search"
          @change="search"
        >
        </el-input>
      </div>
    </div>
    <div class="table">
      <div class="content">
        <el-table
          v-loading="tableLoading"
          size="medium"
          :data="tableData"
          border
          stripe
          style="width: 100%"
        >
          <template slot="empty">
            <span>暂无数据，请选择实验或单元测试~~~</span>
          </template>
          <el-table-column
            v-for="(item, index) of columnList1"
            :key="index"
            align="center"
            :label="item.label"
            :prop="item.prop"
          >
          </el-table-column>
          <el-table-column label="操作" align="center" width="130">
            <template slot-scope="scope">
              <el-button
                @click="rowclick(scope.row)"
                type="text"
                size="small"
                icon="el-icon-search"
                >查看答卷</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getClassAndExamTitleByTeacherId,
  getPageExamScore
} from "@/api/viewResults";

import { columnList1 } from "./config/viewResultsForm";

export default {
  name: "viewResultExam",
  props: {
    placeholder: {
      type: String,
      default: "请输入考试标题进行查询"
    }
  },
  data() {
    return {
      classList: [],
      titleList: [],
      input: "",
      tableLoading: true,
      //一页数据的行数
      pageSize: 10,
      //当前页码
      pageNum: 1,
      //用户信息
      userInfo: {},
      tableData: [], // 存放表格数据
      total: 15, // 数据总数
      columnList1,
      selectId: null,
      selectedClass: null,
      selectedTitle: null
    };
  },
  //  生命周期函数
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    console.log(this.userInfo);
    this.getClassAndExamTitle();
    this.getTableData();
  },
  methods: {
    rowclick(row) {
      if (!row.examName) {
        row.examName = "无标题";
      }
      this.$router.push({
        name: "viewAnswer",
        params: {
          userId: row.userId,
          examId: row.examId,
          examName: row.examName
        }
      });
    },
    // 查询考试成绩
    findExamScore() {
      if (this.selectedClass != null && this.selectedClass.length === 0) {
        this.selectedClass = null;
      }
      if (this.selectedTitle != null && this.selectedTitle.length === 0) {
        this.selectedTitle = null;
      }
      this.getTableData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getTableData();
    },

    search() {
      this.selectedTitle = this.input;
      if (this.selectedTitle != null && this.selectedTitle.length === 0) {
        this.selectedTitle = null;
      }
      this.getTableData();
    },
    //  发送请求，获取表格
    getTableData() {
      this.tableLoading = true;
      getPageExamScore({
        current: this.pageNum,
        limit: this.pageSize,
        teacherId: this.userInfo.userId,
        examTitle: this.selectedTitle,
        className: this.selectedClass
      })
        .then(res => {
          console.log(res, "表格数据");
          this.tableData = res.data;
          this.total = res.total;
        })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    // 获取到班级名称和考试标题
    getClassAndExamTitle() {
      getClassAndExamTitleByTeacherId({
        userId: this.userInfo.userId
      })
        .then(res => {
          console.log(res);
          this.classList = res.data.classNameList;
          this.titleList = res.data.titleList;
        })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.select {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-bottom: 15px;
  .el-select {
    height: 30px;
    margin-right: 20px;
  }
  /deep/ .el-input__inner {
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
  }
  /deep/ .el-input__icon {
    line-height: 30px;
  }
  .el-icon-search {
    line-height: 30px;
    padding-left: 8px;
    color: #5b8bff;
    font-weight: bold;
  }
}

.input_soso {
  width: 300px;
}

.selectTitle {
  font-size: 15px;
  color: #909399;
  font-weight: bold;
}

.content {
  width: 100%;
  margin-top: 10px;
  margin-left: 0%;
}

.title {
  font-size: 30px;
  color: #409eff;
  margin-bottom: 30px;
  font-weight: bold;
}

i {
  font-size: 15px;
}

.el-icon-success {
  color: rgb(2, 206, 36);
}

.el-icon-error {
  color: rgb(255, 27, 27);
}

.el-pagination {
  margin-top: 20px;
  font: 20px;
  height: 100px;
}
</style>
